<script>
import StatusBar from './components/StatusBar.vue'
import PersonalInfo from './components/PersonalInfo.vue'
import DetailInfo from './components/DetailInfo.vue'
import PersonalInfoModal from './components/modal/PersonalInfoModal.vue'
import { Toast, Button, CellGroup, Cell, Field, DatetimePicker, Popup, RadioGroup, Radio, Picker } from 'vant'

export default {
  components: {
    StatusBar,
    PersonalInfo,
    DetailInfo,
    PersonalInfoModal,
    CellGroup,
    Cell,
    Field,
    DatetimePicker,
    Popup,
    RadioGroup,
    Radio,
    Picker,
    Button
  },
  data() {
    return {
      statusCode: 1,
      status: ['即将休假', '休假中', '已完成'],
      isShowInput: true,
      isShowInfoModal: false,
      name: '',
      sex: 0,
      sexs: ['男', '女'],
      studentNumber: '',
      startTime: new Date(),
      endTime: new Date(),
      isShowStartPicker: false,
      isShowEndPicker: false,
      isShowSexPicker: false,
      isShowStatusPicker: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
    }
  },
  computed: {
    startTimeDisplay() {
      let startMonth = this.startTime.getMonth() + 1
      let startDay = this.startTime.getDate()
      let startHh = this.startTime.getHours()
      let startMm = this.startTime.getMinutes()
      if (startMonth < 10) {
        startMonth = '0' + startMonth
      }
      if (startDay < 10) {
        startDay = '0' + startDay
      }
      if (startHh < 10) {
        startHh = '0' + startHh
      }
      if (startMm < 10) {
        startMm = '0' + startMm
      }
      return `${startMonth}-${startDay} ${startHh}:${startMm}`
    },
    endTimeDisplay() {
      let endMonth = this.endTime.getMonth() + 1
      let endDay = this.endTime.getDate()
      let endHh = this.endTime.getHours()
      let endMm = this.endTime.getMinutes()
      if (endMonth < 10) {
        endMonth = '0' + endMonth
      }
      if (endDay < 10) {
        endDay = '0' + endDay
      }
      if (endHh < 10) {
        endHh = '0' + endHh
      }
      if (endMm < 10) {
        endMm = '0' + endMm
      }
      return `${endMonth}-${endDay} ${endHh}:${endMm}`
    },
    sexDisplay() {
      if (this.sex === 0) {
        return '男'
      } else {
        return '女'
      }
    },
    statusDisplay() {
      if (this.statusCode === 0) {
        return '即将休假'
      } else if (this.statusCode === 1) {
        return '休假中'
      } else if (this.statusCode === 2) {
        return '已完成'
      }
    },
  },
  methods: {
    checkModal() {
      this.isShowInfoModal = !this.isShowInfoModal
    },

    onStatusConfirm(value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
      this.statusCode = index
    },
    onStatusCancel() {
      Toast('取消');
    },
    onStatusChange(value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
      this.statusCode = index
    },

    onSexConfirm(value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
      this.sex = index
    },
    onSexCancel() {
      Toast('取消');
    },
    onSexChange(value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
      this.sex = index
    },

    clickStatus() {
      this.isShowStatusPicker = true
    },
    clickSex() {
      this.isShowSexPicker = true
    },
    clickStart() {
      this.isShowStartPicker = true
    },
    clickEnd() {
      this.isShowEndPicker = true
    },

    save() {
      this.isShowInput = false
    }
  }
}
</script>

<template>
  <status-bar :status-code="statusCode" @check-modal="checkModal" />
  <personal-info
    :name="name"
    :sex="sex"
    :student-number="studentNumber"
    :start-time="startTimeDisplay"
    :end-time="endTimeDisplay"
  />
  <detail-info
    :status-code="statusCode"
    :start-time="startTimeDisplay"
    :end-time="endTimeDisplay"
  />
  <personal-info-modal :isShow="isShowInfoModal" @check-modal="checkModal" />
  <div class="bg" v-show="isShowInput">
    <cell-group inset title="请假状态">
      <Cell is-link title="状态" :value="statusDisplay" @click="clickStatus" />
    </cell-group>
    <cell-group inset title="个人信息">
      <Field v-model="name" label="姓名" placeholder="请输入姓名"></Field>
      <Field v-model="studentNumber" label="学号" placeholder="请输入学号"></Field>
      <Cell is-link title="性别" :value="sexDisplay" @click="clickSex" />
    </cell-group>
    <cell-group inset title="时间">
      <Cell is-link title="开始时间" :value="startTimeDisplay" @click="clickStart" />
      <Cell is-link title="结束时间" :value="endTimeDisplay" @click="clickEnd" />
    </cell-group>
    <Button block round class="btn" @click="save">保存</Button>
  </div>
  <Popup v-model:show="isShowSexPicker" position="bottom">
    <Picker
      title="性别"
      :columns="sexs"
      @confirm="onSexConfirm"
      @cancel="onSexCancel"
      @change="onSexChange"
    ></Picker>
  </Popup>
  <Popup v-model:show="isShowStatusPicker" position="bottom">
    <Picker
      title="请假状态"
      :default-index="1"
      :columns="status"
      @confirm="onStatusConfirm"
      @cancel="onStatusCancel"
      @change="onStatusChange"
    ></Picker>
  </Popup>
  <Popup v-model:show="isShowStartPicker" position="bottom">
    <datetime-picker
      v-model="startTime"
      title="选择开始时间"
      :min-date="minDate"
      :max-date="maxDate"
    ></datetime-picker>
  </Popup>
  <Popup v-model:show="isShowEndPicker" position="bottom">
    <datetime-picker
      v-model="endTime"
      title="选择结束时间"
      :min-date="minDate"
      :max-date="maxDate"
    ></datetime-picker>
  </Popup>
</template>

<style>
@import url("vant/lib/index.css");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vh;
  background-color: #f5f7f9;
}
.main-text {
  font-size: 3.2vw;
}
.font-dark {
  color: #464c5b;
}
.font-light {
  color: #9ea7b4;
}
.font-normal {
  color: #657180;
}
.font-warning {
  color: #f90;
}
.font-primay {
  color: #39f;
}

.bg {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding-top: 10vh;
  background-color: #f5f7f9;
}

.input {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  width: 76%;
  max-height: 70vh;
  background: #fff;
  border-radius: 2.13333vw;
  overflow: hidden;
  padding: 4vw;
}
.btn {
  position: fixed;
  bottom: 8vw;
  width: calc(100vw - 32px);
  margin: 0 16px;
}
</style>
